<template>
  <el-container class="index">
    <el-header>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect">
        <el-menu-item index="home">首页</el-menu-item>
        <el-menu-item index="lab">实验室概况</el-menu-item>
        <el-submenu index="member">
          <template slot="title">团队介绍</template>
          <el-menu-item index="yjfx">研究方向</el-menu-item>
          <el-menu-item index="ryzc">人员组成</el-menu-item>
          <el-menu-item index="tdjs">团队建设</el-menu-item>
        </el-submenu>
        <el-submenu index="academic">
          <template slot="title">科研学术</template>
          <el-menu-item index="sysxw">实验室新闻</el-menu-item>
          <el-menu-item index="kycg">科研成果</el-menu-item>
          <el-menu-item index="xsjl">学术交流</el-menu-item>
          <el-menu-item index="jszt">技术杂谈</el-menu-item>
        </el-submenu>
        <el-menu-item index="message">留言板</el-menu-item>
        <el-button-group class="btnGroup">
          <el-button round @click="toAccount()">{{online?user.username:'登录'}}</el-button>
          <el-button v-if="online" round class="btn" @click="toLogout()">登出</el-button>
        </el-button-group>
      </el-menu>
    </el-header>
    <el-main>
      <router-view/>
    </el-main>
    <el-footer class="index-footer">
      <div class="footer">
        <div class="container">
          <div class="address">
            <ul>
              <li><i class="fa fa-map-marker" aria-hidden="true"></i>
                Broome St, Canada, NY 10002, New York</li>
              <li><i class="fa fa-phone" aria-hidden="true"> </i>  +01 111 222 3333</li>
              <li><i class="fa fa-envelope" aria-hidden="true"></i>
                <a href="mailto:info@example.com"> mail@example.com</a>
              </li>
            </ul>
          </div>
          <div class="copy-right">
            <p>Copyright &copy; 2016.Company name All rights reserved.More Templates
              <a href="https://gitee.com/housirvip/lab-vue" target="_blank" title="开源代码">
                开源代码</a></p>
          </div>
        </div>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import {UserService, AccountService, LocalService} from '@/service/api'

export default {
  data () {
    return {
      activeIndex: 'home'
    }
  },
  computed: {
    user: function () {
      return this.$store.state.user
    },
    online: function () {
      let ok = UserService.online()
      if (ok) {
        UserService.me()
      }
      return ok
    }
  },
  mounted: function () {
    this.activeIndex = LocalService.GetIndexPath()
  },
  methods: {
    toAccount: function () {
      LocalService.SaveIndexPath('center')
      this.$router.push({path: '/account'})
    },
    toLogout: function () {
      AccountService.logout()
    },
    handleSelect: function (key, keyPath) {
      LocalService.SaveIndexPath(keyPath[0])
      switch (keyPath[0]) {
        case 'home':
          this.$router.push({path: '/home'})
          break
        case 'lab':
          this.$router.push({path: '/post/view/lab'})
          break
        case 'message':
          this.$router.push({path: '/home/message'})
          break
        case 'member':
          this.$router.push({path: '/post/view/' + keyPath[1]})
          break
        case 'academic':
          this.$router.replace({path: '/post/list/' + keyPath[1]})
          break
        default:
      }
    }
  }
}
</script>

<style scoped>
  .index{
    display: flex;
    display: -webkit-flex; /* Safari */
    min-height: 82vh;
    flex-direction: column;
  }

  .btnGroup{
    height: 100%;
    float:right;
    margin-left:10%;
  }

  .index-footer{
    padding: 0;
  }

  .footer {
    padding: 3em 0;
    background: #d0d9e2;
    display: block;
  }

  .container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    box-sizing: border-box;
  }

  .address ul li {
    font-size: 1.1em;
    display: inline-block;
    width: 33%;
    text-align: center;
    color: #fff;
  }

  .copy-right p {
    color: #fff;
    text-align: center;
    margin-top: 2em;
    padding-top: 2em;
    border-top: 2px solid #9d9d9d;
  }

  .address ul li a {
    color: #fff;
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
    transition: .5s all;
  }
</style>
